<template>
  <div class="banner_swiper">
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide class="s_slide">
        <img
          src="http://www.sword9991.cn/img/61da06af8996d7d579a2950067088beba91fbc34.jpg@880w_388h_1c_95q.jpg"
          alt=""
          class="swiper_img"
        />
        <div class="s_text">撑住！就一定可以！</div>
      </swiper-slide>
      <swiper-slide class="s_slide">
        <img
          src="http://www.sword9991.cn/img/148ae6ee82b7760408c24f817f951c024be61aec.png@880w_388h_1c_95q.jpg"
          alt=""
          class="swiper_img"
        />
        <div class="s_text">说说那些悬疑片里的“神”编剧...</div>
      </swiper-slide>
      <swiper-slide class="s_slide">
        <img
          src="http://www.sword9991.cn/img/19d933d92a240c20a92562c9a7215ef393a11da7.jpg@880w_388h_1c_95q.jpg"
          alt=""
          class="swiper_img"
        />
        <div class="s_text">你要一起吗？还有我的神秘彩蛋掉落</div>
      </swiper-slide>
      <swiper-slide class="s_slide">
        <img
          src="http://www.sword9991.cn/img/28ce4d786b98fed2c646e37859cd3430cf49984b.jpg@880w_388h_1c_95q.jpg "
          alt=""
          class="swiper_img"
        />
        <div class="s_text">读懂了空气，才能读懂《白色相簿》</div>
      </swiper-slide>
      <swiper-slide class="s_slide">
        <img
          src="http://www.sword9991.cn/img/6e0c7f5e29859fd48837cecdee9f0c7c532feeeb.jpg@880w_388h_1c_95q.jpg"
          alt=""
          class="swiper_img"
        />
        <div class="s_text">会动的手办见过不？</div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="rcmd_box">
      <div class="video_card" v-for="(item, index) in data" :key="index">
        <img :src="item.img" alt="" />
        <p class="title">{{ item.title }}</p>
        <div class="hidden_text">
          <p class="title">{{ item.title }}</p>
          <p class="up"><img src="/img/up_icon.png" alt="" /> {{ item.up }}</p>
          <p class="info"><img src="/img/play.png" alt="" />{{ item.play }}</p>
          <img src="/img/replay.png" alt="" class="replay" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
  title: "Pagination",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        parallax: true,
        loop: true,
        autoplay: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  props: ["data"],
};
</script>
<style lang="css" scoped>
p.title {
  background: linear-gradient(to bottom, transparent, black);
}
</style>

<style lang="scss" scoped>
.banner_swiper {
  display: flex;
  justify-content: space-between;
  width: 999px;
  height: 202px;
  margin: 0 auto;
  margin-bottom: 40px;
}
.swiper {
  width: 459px;
  height: 202px;
  .swiper_img {
    width: 459px;
  }
}
.s_slide {
  position: relative;
}
.s_text {
  position: absolute;
  width: 321px;
  height: 19px;
  bottom: 10px;
  left: 12px;
  font-size: 14px;
  color: white;
}
.swiper-pagination {
  text-align: right;
  padding-right: 10px;
}
.rcmd_box {
  width: 530px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .video_card {
    cursor: pointer;
    position: relative;
    border-radius: 2px;
    width: 170px;
    height: 96px;
    margin: 2px 2px;
    background-color: #fb7299;
    overflow: hidden;
    img {
      display: block;
      width: 100%;
    }
    > .title {
      color: white;
      font-size: 16px;
      box-sizing: border-box;
      padding: 4px;
      position: relative;
      bottom: 30px;
      margin: 0 auto;
      margin-bottom: 6px;
      text-align: center;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &:hover > .hidden_text {
      transform: translateY(-100%);
    }
    &:hover > p.title {
      display: none;
    }
    .hidden_text {
      .title {
        background: unset;
      }
      position: absolute;
      padding: 4px;
      transform: translateY(-28%);
      transition: 0.2s linear;
      background: linear-gradient(to bottom, transparent, black);
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      z-index: 20;
      color: white;
      vertical-align: middle;
      p.title {
        height: 42px;
        overflow: hidden;
        font-size: 16px !important;
        margin-top: 6px;
        text-overflow: ellipsis;
      }
      .up {
        margin-top: 2px;
        line-height: 20px;
      }
      img {
        display: inline-block;
        // vertical-align: middle;
        width: 20px;
        height: 20px;
      }
      .info {
        line-height: 20px;
      }
      .replay {
        display: block;
        position: relative;
        bottom: 24px;
        right: -145px;
      }
    }
  }
}
</style>
